<template>
	<view class="comment-content">
		<view class="segmented-padding-wrap">
			<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" styleType="text" activeColor="#007aff"></uni-segmented-control>
		</view>
		<view v-if="comments.length !== 0">
			<view class="task-comment-item" v-for="comment in comments" :key="comment">
				<view class="cus-image-text-col">
					<text class="cus-image-text-col1">{{comment.create_name}}</text>
					<view>
						<text>{{comment.create_name}}</text>
						<text>{{comment.work_name}}</text>
					</view>
					<view :class="[comment.state === 'underway' ? 'cus-primary': 'cus-default', 'comment-state']" @click="closeReply(comment)">{{ comment.state === 'underway'? '进行中' : '完成' }}</view>
					<text>{{comment.create_date}}</text>
				</view>
				<view class="task-comment-item-remark">{{comment.note}}</view>
				<view class="task-comment-item-image">
					<cus-upload-image :imageList="comment.picture_data" :show="false" :removeMark="false" :hasHead="false" :imgSize="100"
					 :imgMargin="6"></cus-upload-image>
					<cus-upload-video v-if="comment.mediaurl && !showPopup" :src="comment.mediaurl" :width="100" :height="100"></cus-upload-video>
				</view>
				<view v-if="comment.reply_number > 0" class="comment-reply">
					<view v-for="reply in comment.reply_line" :key="reply" v-if="comment.expand">
						<text>{{reply.reply_name}}：</text>
						<text>{{reply.note}}</text>
						<cus-upload-image v-if="reply.picture_data" :imageList="reply.picture_data" :show="false" :removeMark="false"
						 :hasHead="false" :imgSize="100" :imgMargin="6"></cus-upload-image>
					</view>
					<view class="comment-reply-count" @click="expandReply(comment)">
						<text>共 {{comment.reply_number}} 条回复</text>
						<view style="padding-top: 6upx;">
							<uni-icon type="arrowright" size="15"></uni-icon>
						</view>
					</view>
				</view>
				<view class="task-comment-item-status">
					<text v-if="comment.is_focus" class="def-icon cus-active" @click="careComment(comment)">&#xe681;</text>
					<text v-else class="def-icon" @click="careComment(comment)">&#xe61f;</text>
					<text class="def-icon" @click="commentReply(comment)">&#xe891;</text>
				</view>
				<view class="line-item"></view>
			</view>
			<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		</view>
		<view v-if="comments.length === 0 && !loading" class="cus-no-data">
			<text class="def-icon">&#xe64b;</text>
			<text> 暂 无 评 论 . . . </text>
		</view>
		<uni-popup type="middle" :show="showPopup" @hidePopup="hidePopup" :popupWidth="600">
			<view class="task-comment-popup-title">发表评论</view>
			<view class="task-comment-popup-note">
				<textarea placeholder="评论内容" v-model="publishData.note" class="comment-reply-note"></textarea>
			</view>
			<cus-upload-image imgTitle="评论图片" :imgSize="170" @acquirePaths="acquirePaths" v-if="showPopup"></cus-upload-image>
			<view>
				<button type="primary" @click="publishComment">发表</button>
			</view>
		</uni-popup>
		<uni-fab :pattern="pattern" :content="content" :showIcon="false" :horizontal="horizontal" :vertical="vertical"
		 @trigger="trigger" @onlyOne="fabOnlyOne()" @longpress="fadlongpress"></uni-fab>

		<uni-drawer :visible="showDrawer" mode="right" @close="showDrawer=false">
			<view class="drawer-content">
				<form @submit="formSearch">
					<view class="uni-title uni-common-mt uni-common-pl">状态(单选)</view>
					<view class="uni-list">
						<radio-group name="state">
							<label class="uni-list-cell uni-list-cell-pd" v-for="item in states" :key="item.value">
								<view>
									<label class="radio">
										<radio :value="item.value" :checked="dataParams.state===item.value" />{{item.label}}
									</label>
								</view>
							</label>
						</radio-group>
					</view>
					<view class="uni-title uni-common-mt uni-common-pl">任务名称</view>
					<view class="cus-search-component">
						<input name='work_name' v-model="dataParams.work_name" placeholder="任务名称" />
					</view>
					<view class="uni-btn-v form-button">
						<button type="primary" size="mini" formType="submit" class="search-button">搜索</button>
						<button type="default" size="mini" formType="reset">重置</button>
					</view>
				</form>
			</view>
		</uni-drawer>

		<!-- <mpvue-picker ref="mpvuePickerStateRef" :deepLength="1" @onConfirm="onStateConfirm" :pickerValueArray="states"></mpvue-picker>
		<mpvue-picker ref="mpvuePickerWorkRef" :deepLength="1" @onConfirm="onWorkConfirm" :pickerValueArray="works"></mpvue-picker> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataParams: {
					hard_id: null,
					user_id: null,
					comment_type: '1',
					page_no: 1,
					page_size: 10,
				},
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				comments: [],
				showPopup: false,
				hardId: null,
				publishData: {
					work_id: null,
					note: '',
					picture_data: []
				},
				items: [
					'全部',
					'我的关注',
					'我发表的'
				],
				current: 0,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#008ff3'
				},
				content: [{
						// iconPath: '/static/component.png',
						// selectedIconPath: '/static/componentHL.png',
						text: '搜索',
						active: false
					},
					// #ifdef MP-WEIXIN
					{
						text: '新增',
						active: false
					}
					// #endif
				],
				horizontal: 'left',
				vertical: 'bottom',
				states: [{
						label: '进行中',
						value: 'underway'
					},
					{
						label: '完成',
						value: 'done'
					}
				],
				works: [],
				showDrawer: false,
				loading: false // 正在加载状态
			}
		},
		onLoad(params) {
			this.hardId = parseInt(params.id)
			this.publishData.hard_id = parseInt(params.id)
			this.dataParams.hard_id = parseInt(params.id)
			this.getProjectCommemts()
			// this.getWorks()
			this.$eventBus.$on("projectCommentPublishExecute", () => { // 接受评论新增成功事件
				this.getProjectCommemts(this.hardId)
			})
		},
		onNavigationBarButtonTap() { // 导航栏右侧按钮
			uni.navigateTo({
				url: './projectCommentPublish?hardId=' + this.hardId,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		onReachBottom() { // 滚动条到底触发
			if (this.loadingType !== 0) {
				return;
			}
			this.dataParams.page_no++
			this.loadingType = 1
			uni.request({
				url: this.$store.state.baseUrl + '/lwj/get_hard_comment_list',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: this.dataParams,
				success: res => {
					let tempRes = res.data.data.list
					tempRes.forEach(item => {
						item.picture_data = item.att_list.map(att => att.imgurl)
					})
					this.comments.push(...tempRes)
					if (res.data.data.list.length < this.dataParams.page_size) {
						this.loadingType = 2
					} else {
						this.loadingType = 0
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			formSearch(e) { // 搜索
			    this.dataParams.page_no = 1
				this.dataParams.state = e.detail.value.state
				this.dataParams.work_name = e.detail.value.work_name
				this.getProjectCommemts()
				this.showDrawer = false
			},
			closeReply(comment) { //关闭评论
				if (comment.state === 'done') return
				if (comment.create_uid !== this.$store.state.uid) {
					uni.showToast({
						title: '只有创建用户能关闭',
						icon: 'none',
						duration: 3000
					})
					return
				}
				uni.showModal({
					title: '关闭评论',
					content: '评论关闭后，此评论不能再回复，是否要关闭 ?',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: this.$store.state.baseUrl + '/lwj/hard_comment_over',
								method: 'POST',
								header: {
									token: this.$store.state.token
								},
								data: {
									comment_id: comment.id
								},
								success: res => {
									if (res.data.code === 1) {
										uni.showToast({
											title: "评论已关闭"
										})
										comment.state = 'done'
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: 'none',
											duration: 3000
										})
									}
								},
								fail: () => {},
								complete: () => {}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			expandReply(comment) { // 展开评论
				this.$set(comment, 'expand', !comment.expand)
				this.comments.push({})
				this.comments.pop({})
			},
			fadlongpress() { // 悬浮按钮长按
				if (this.vertical === 'top') {
					this.vertical = 'bottom'
				} else {
					this.vertical = 'top'
				}
			},
			fabOnlyOne() {
				this.showDrawer = !this.showDrawer
			},
			trigger(e) { // 悬浮按钮中的选项
				for (let index in this.content) {
					this.content[index].active = index == e.index
				}
				if (e.index === 0) {
					// 显示 状态 选项底部浮窗
					// this.$refs.mpvuePickerStateRef.show()
					this.showDrawer = true
				} else {
					uni.navigateTo({
						url: './projectCommentPublish?hardId=' + this.hardId,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			/* onStateConfirm(e) { // 状态 选项底部浮窗  确定
				this.dataParams.comment_type = '1'
				this.dataParams.state = e.value[0]
				this.getProjectCommemts()
			},
			getWorks() { // 获取任务项
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_work_list',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						hard_id: this.hardId
					},
					success: res => {
						if (res.data.code === 1) {
							this.works = res.data.data.map(item => {
								let temp = {}
								temp.label = item.name
								temp.value = item.id
								return temp
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onWorkConfirm(e) { // 任务项 选项底部浮窗  确定
				this.dataParams.comment_type = '1'
				this.dataParams.work_name = e.label
				this.getProjectCommemts()
			}, */
			onClickItem(index) { // 顶部tab选项卡
			    this.comments = []
				this.loading = true
				delete this.dataParams.state
				delete this.dataParams.work_name
				if (this.current !== index) {
					this.current = index;
					this.dataParams.page_no = 1
					if (index === 0) {
						this.dataParams.comment_type = '1'
					} else if (index === 1) {
						this.dataParams.comment_type = '0'
					} else {
						this.dataParams.comment_type = '1'
						this.dataParams.user_id = this.$store.state.uid
					}
					this.getProjectCommemts()
				}
			},
			getProjectCommemts() { // 获取评论列表
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/get_hard_comment_list',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: this.dataParams,
					success: res => {
						this.loading = false
						delete this.dataParams.user_id
						// delete this.dataParams.state
						// delete this.dataParams.work_name
						if (res.data.data.list.length < this.dataParams.page_size) {
							this.loadingType = 2
						} else {
							this.loadingType = 0
						}
						this.comments = res.data.data.list
						this.comments.forEach(item => { // 图片格式转化
							item.picture_data = item.att_list.map(att => att.imgurl)
							item.expand = false
							if (item.reply_line.length > 0) {
								item.reply_line.forEach(reply => {
									if (reply.rep_list.length > 0) {
										reply.picture_data = reply.rep_list.map(rep => rep.imgurl)
									}
								})
							}
						})
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			hidePopup() {
				this.showPopup = false
			},
			acquirePaths(paths) { // 图片地址
				this.publishData.picture_data = paths
			},
			commentReply(comment) { // 评论回复 弹框
				if (comment.state === 'done') {
					uni.showToast({
						title: '此评论已经关闭回复',
						icon: 'none',
						mask: false,
						duration: 3000
					});
					return
				}
				this.showPopup = true
				this.publishData.comment_id = comment.id

			},
			publishComment() { // 评论回复
			    if(!this.publishData.note) {
					uni.showToast({
						icon: 'none',
						title: '评论内容不能为空',
						duration: 3000
					})
					return
				}
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_comment_reply',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: this.publishData,
					success: res => {
						if (res.data.code === 1) {
							this.publishData.note = ""
							this.publishData.picture_data = []
							this.getProjectCommemts()
						} else if (res.data.code === -1) {
							uni.showModal({
								title: '失败',
								content: '登录过期需要重新登录',
								showCancel: false,
								confirmText: '确定',
								success: res => {
									uni.navigateTo({
										url: '../../login/login',
										success: res => {},
										fail: () => {},
										complete: () => {}
									});
								},
								fail: () => {},
								complete: () => {}
							});
						} else {
							uni.showModal({
								title: '失败',
								content: res.data.msg,
								showCancel: false,
								confirmText: '确定',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}
						this.showPopup = false
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			careComment(comment) { // 关注评论
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_comment_give_like',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						comment_id: comment.id,
						user_id: this.$store.state.uid,
						type: comment.is_focus ? 'cancel' : 'add'
					},
					success: res => {
						if (res.data.code === 1) {
							comment.is_focus = !comment.is_focus
							uni.showToast({
								icon: 'none',
								title: comment.is_focus ? '已成功关注' : '已取消关注'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								mask: false,
								duration: 3000
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
	}
</script>

<style scoped>
	.comment-content {
		width: 100%;
		background-color: #FFFFFF;
	}

	.segmented-padding-wrap {
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}

	.task-comment-item {
		background-color: #FFFFFF;
		padding: 0 40upx;
	}

	.comment-state {
		margin-right: 40upx;
	}

	.comment-reply-note {
		display: block;
		width: 560upx;
		height: 200upx;
	}

	.task-comment-item-remark {
		margin: 20upx 0 10upx 90upx;
	}

	.task-comment-item-image {
		margin-top: -20upx;
		padding-left: 60upx;
		display: flex;
	}

	.comment-reply {
		margin: 0 40upx 30upx 90upx;
		padding: 20upx;
		background-color: rgba(0, 0, 0, 0.05);
	}

	.comment-reply-count {
		color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: space-between;
	}

	.line-item {
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}

	.task-comment-item-status {
		text-align: right;
		margin-top: -20upx;
	}

	.task-comment-item-status .def-icon {
		font-size: 40upx;
		padding: 0 30upx;
	}

	.task-comment-popup-title {
		text-align: center;
		margin-bottom: 20upx;
		font-weight: bold;
	}

	.task-comment-popup-note {
		background-color: #EEEEEE;
		padding: 20upx;
		border-radius: 10upx;
	}

	.form-button {
		display: flex;
		justify-content: space-around;
		padding: 0 40upx;
	}

	.cus-search-component {
		margin: 20upx 40upx;
	}

	.cus-search-component input {
		border: 2upx solid rgba(0, 0, 0, 0.2);
	}
</style>
